<template>
  <div>
    <!--表格对象-->
    <DictManageTable
      ref="tableRef"
      :table="table"
      :query="query"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @rowClick="rowClick"
      @addRow="addRow"
      @editRow="editRow"
    />
    <!--添加编辑对话框-->
    <DictAddOrEditDialog
      ref="dialogRef"
      :action="action"
    />
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import DictManageTable from '@/views/page/system/dict/DictManageTable.vue';
// 导入添加编辑表单
import DictAddOrEditDialog from '@/views/page/system/dict/DictAddOrEditDialog.vue';

import {
  defineExpose,
  getCurrentInstance, onMounted, provide, ref,
} from 'vue';
import { TableColumn } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import useTableList from '@/api/common/useTableList';
import { TableRef } from '@/types/interface/base_ref_interface';
import { Dict } from '@/types/interface/sys_interface';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();
// 表格工具必备参数，此处设置为不立即加载
const {
  table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage,
} = useTableList(proxy.$urls.API_URL_BACKSTAGE_DICT_MANAGE, true, {}, false);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

// 定义属性菜单的ref对象
const tableRef = ref<TableRef>();
// 获取表格所选中的行
const getSelectionRows = () => tableRef.value!.getSelectionRows();
// onMounted(async () => {
//   // 加载表格数据
//   await loadTableList();
//   if (table.data.length > 0) { // 如果表格存在数据，将第一条记录设置为当前选中行
//     tableRef.value!.toggleRowSelection(table.data[0], true);
//   }
//   console.log(table.data);
// });
// 初始化表格数据，并默认选中第一行，这里暴露给父元素执行，以达到与字典列表项元素的同步
const initTable = async () => {
  // 加载表格数据
  await loadTableList();
  if (table.data.length > 0) { // 如果表格存在数据，将第一条记录设置为当前选中行
    tableRef.value!.toggleRowSelection(table.data[0], true);
  }
};
defineExpose({ // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  getSelectionRows,
  initTable,
});
// 点击字典表格的行
const rowClick = (row:any):void => {
  proxy.$emit('rowClick', row);
};
// 添加和编辑表单的对话框操作
// 表单对象，决定添加编辑表单的action。
const action = ref('post');
// 打开基础对话框
const dialogRef = ref();
// 点击添加按钮
const addRow = () => {
  const form = {};
  action.value = 'post';
  dialogRef.value!.openDialog(form);
};

// 编辑单行记录。
const editRow = async (row:Dict) => {
  action.value = 'put';
  // 从服务端读取该行的最新信息
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_DICT_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};
</script>

<style scoped>

</style>
